<template>
  <div class="container">
    <h1>ref 属性 绑定Dom或者组件实例</h1>
    <!-- vue2.0 获取单个元素 -->
    <!-- 1, 通过ref绑定该元素 -->
    <!-- 2, this.$refs.box-->
    <!-- <div ref="box">我是box</div> -->
    <!-- vue2.0 获取多个元素 -->
    <!-- 1,通过ref绑定该元素 -->
    <!-- 2,this.$refs.li 是数组 通过索引来取对应的dom实例 -->
    <!-- <div>
   <li ref="li" v-for="i in 4" :key="i">{i}</li>
</div> -->
    <!-- vue3.0 单个元素 -->
    <div ref="dom">我是box</div>
    <!-- vue3.0遍历的时候 -->
    <div>
      <li :ref="setDom" v-for="i in 4" :key="i">{{ i }}</li>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";

export default {
  name: "App",

  setup() {
    // 1.获取单个元素
    // 1.1 先定义一个空的响应式数据ref定义的
    // 1.2 setup中返回该数据，想获取哪个Dom对象，就把该数据绑在谁的身上
      const dom = ref(null);
      // 想取到值。value
      onMounted(() => {
         console.log(dom.value);
      });
    // console.log(dom);
    // 2.获取多个dom
    // 2.1 定义一个空数组，接收所有所有的li
    // 2.2 定义一个函数，往空数组中push Dom  ref调用
    const domList = [];
    const setDom = (el) => {
      // console.log(el);
      domList.push(el);
    };
    console.log(domList);//得到啦所有的dom对象  得自己来。
    return { dom, setDom };
  },
};
</script>

<style>
</style>